<template>
	<view class="records">
		<view class="title">{{dialogTitle}}</view>
		<image
		  mode="widthFix"
		  class="closeIcon"
		  @click="onHandleClose"
		  src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/records/close.png"
		/>
		<view class="content" v-if="listdata.length>0">
			<image
				class="treasure"
				:src="listdata[0].food?listdata[0].food.icon_image:listdata[0].sceneryImg.image"
			/>
			
			<!-- <text class="tips">受邀请玩家需点击分享卡牌进行游戏并授权</text> -->
		</view>
		<view style="overflow-x:scroll;margin-top: 20px;">
			<view style="overflow-x:scroll;" :style="{'width':(100*(listdata.length))+'px'}">
				<div @click="select(item)" style="width: 100px;float: left;" v-for="(item,index) in listdata">
					<view style="text-align: center;">
						{{vuex_dogName}}于{{item.createtime}}在路上收获了{{item.food?item.food.name:item.sceneryImg.name}}
					</view>
					<image
						style="width: 100%;"
						:src="item.food?item.food.icon_image:item.sceneryImg.image"
						mode="widthFix"
					/>
					<!-- <image
						:src="require('..https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/records/fail.png')"
						mode="scaleToFill"
						class="fail"
					/> -->
				</div>
				
			</view>
		</view>
		
    </view>
	</view>
</template>
<script>
export default {
	props:['dialogTitle','listdata'],
	methods: {
		onHandleClose() {
			this.$emit('onCloseClick')
		},
		async lingqu(id){
			let data={
				explore_record_id:id
			}
			let res = await this.$u.api.receive_food(data)
			uni.showToast({
				title:'领取成功',
				icon:'none'
			})
		},
		select(e){
			if(e.type==1){
				this.lingqu(e.id)
			}else{
				var imgArr = [];
				imgArr.push(e.sceneryImg.image);
				uni.previewImage({
					urls: imgArr,
					current: 0
				});
			}
		}
	}
}
</script>

<style scoped>
.records {
	background: rgba(250, 250, 250, .5);
	position: relative;
	border-radius: 20rpx;
	padding: 20rpx;
}
.records .title {
	width: 100%;
	height: 120rpx;
	line-height: 120rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/records/title-bg.png');
	background-size: 100% 100%;
	border-top-left-radius: 20rpx;
	font-size: 50rpx;
	color: #af5c0b;
	font-weight: 800;
	letter-spacing: 8rpx;
	margin-bottom: 0 !important;
}
.records .closeIcon {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
}
.content {
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 10rpx solid #ffdd96;
	border-top: none;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.content .treasure {
	width: 90%;
	height: 300rpx;
	margin: 20rpx 0;
}
.friend {
	width: 100%;
	display: flex;
	justify-content: space-around;
}
.friend .item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.friend .item image {
	width: 100%;
	height: 300rpx;
}
.item image.fail {
	width: 90%;
	height: 80rpx;
	margin: 20rpx 0;
}
text.tips {
	margin: 20rpx 0;
	font-size: 25rpx;
	color: #70563d;
	font-weight: 600;
}
</style>